<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:08:18
 * @LastEditTime: 2024-01-22 16:20:33
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\ach\a4.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="main mainPadding " style="background:#fff;">
        <div class="max-w">
        <el-breadcrumb separator=">" class="p-t">
            <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="width: 100%;" v-loading="loading">
            <bookGoodsP :info="info" @purchase="purchase"></bookGoodsP>
            <el-card class="box-card">
                <template #header>
                    <div style="text-align: left;">同类推荐</div>
                </template>
                <div class="flex">
                    <div class="b1view" style="width: 20%;padding:10px;" v-for="(item,i) in list1[0]" :key="i">
                        <div class="ad-view" style="height: 216px;width: 100%;">
                            <imgView type="ad" :src="item.cover" />
                        </div>
                        <div>
                            <div class="title omit">{{ item.title }}</div>
                            <div class="p">
                                <span class="p1">优惠价</span>
                                <span class="p2">{{ item.price }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <div class="MarT">
                <el-row :gutter="20">
                    <el-col :span="6" v-if="list1[1]">
                        <el-card>
                            <div class="b1view" style="width: 100%;padding:10px;" v-for="(item,i) in  list1[1]" :key="i">
                                <div class="ad-view" style="height: 216px;width: 100%;">
                                    <img :src="item.url" alt="" class="ad-img">
                                </div>
                                <div>
                                    <div class="title omit">{{ item.title }}</div>
                                    <div class="p">
                                        <span class="p1">优惠价</span>
                                        <span class="p2">{{ item.p1 }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="list1[1]?18:24">
                        <el-card class="box-card" v-if="info">
                            <template #header>
                                <div style="text-align: left;">商品详情</div>
                            </template>
                            <div>
                                <el-row :gutter="5">
                                    <el-col :span="8"><div class="q-font">出版社：{{ info.press }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">ISBN：--</div></el-col>
                                    <el-col :span="8"><div class="q-font">版次：{{ info.number }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">商品编码：{{ info.sn }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">品牌：{{ info.brand }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">平装开本：--</div></el-col>
                                    <el-col :span="8"><div class="q-font">出版时间：{{ info.st }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">用纸：{{ info.pack }}</div></el-col>
                                    <el-col :span="8"><div class="q-font">页数：{{ info.ps }}</div></el-col>
                                </el-row>
                            </div>
                            <div class="contview">
                                <div class="title1"><span>作者简介</span></div>
                                <div class="count">
                                    {{ info.writerDes }}
                                </div>
                            </div>
                            <div class="contview">
                                <div class="title1"><span>内容简介</span></div>
                                <div class="count">
                                    {{ info.blurb }}
                                </div>
                            </div>
                            <div class="contview">
                                <div class="title1"><span>精彩书摘</span></div>
                                <div class="count"></div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        </div>
    </div>
    <el-dialog v-model="is_pay" title="" width="40%" style="border-radius:15px;padding-bottom:10px;">
        <div style="font-size:24px;font-weight:bold;color:#333;">确认付款</div>
        <div style="width: 100%;margin-top:50px;">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div style="font-size:17px;color:#333;text-align:left;">在线支付</div>
                    <div class="payType cursor-p" style="margin-top:20px;">
                        <div v-for="(item,i) in list_payType" :key="i" :class="item.select?'active item ':'item'" @click="click_payType(i)">
                            <img v-if="i==0" class="ad-img" src="~@/assets/img/user/p1.png" alt="">
                            <img v-if="i==1" class="ad-img" src="~@/assets/img/user/p2.png" alt="">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div style="font-size:16px;color:#333;text-align:left;margin-top:28px;">
                        <span>应付金额￥ </span>
                        <span style="color:#d00b00;font-size:18px;font-weight:bold;">{{info.price||'--'}}</span>
                    </div>
                    <div class="btn-submit" v-if="!showLogin" @click="payclick" style="margin:50px auto;">立即支付</div>
                    <div class="btn-submit" v-if="showLogin" @click="login" style="margin:50px auto;">去登陆</div>

                </el-col>
            </el-row>
            
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import { ElMessage } from 'element-plus'
    import bookGoodsP from '../components/book/index_p.vue';
    import { useRouter } from "vue-router";
    const Router = useRouter();
    const loading = ref(false)
    const is_pay = ref(false)
    const title = ref(Router.currentRoute.value.query.title)
    // 面包屑
    const breadcrumb_list = [{name:'成果库'},{name:'图书'},{name:title.value}]
    const showLogin = ref(false)
    const isToken = () => {
        const loginData = JSON.parse(localStorage.getItem("loginData"));
        if (!loginData) {
            showLogin.value = true
        }
    };
    isToken();
    const login=()=>{
        Router.push({
            path: "/login",
        });
    }
    const info = ref(null);
    // 获取同类
    const list1 = ref([])
    const getList=(cid)=>{
        proxy.$http.request(proxy.$api.list_book_list+'?nextTag=0&pageSize=10&prevTag=0&cateId='+cid,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list1.value = proxy.$comJs.carveUp(res.data.data.list,5)
                } 
            }
        })
    }
    // 获取图书详情
    const getBookInfo=()=>{
        loading.value = true
        proxy.$http.request(proxy.$api.list_book_list+'/'+Router.currentRoute.value.query.newsId,'get',{},false, function (res) {
            if(res&&res.data){
                info.value = res.data.data
                getList(res.data.data.cateId)
            }
            loading.value = false
        })
    }
    getBookInfo()
    

    
    // 购买
    const index_payType = ref(0)
    const list_payType = ref([
        {name:'支付宝支付',select:true},{name:'微信支付',select:false}
    ])
    const click_payType = (i)=>{
        list_payType.value.map((item)=>{
            item.select = false
        })
        list_payType.value[i].select = true
        index_payType.value = i
    }
    const purchase=()=>{
        is_pay.value = true
    }
    const payclick=()=>{
        proxy.$http.request(proxy.$api.pay,'post',{
            "payWay":index_payType.value==0?1:2,
            "source":3,
            "threeId":info.value.bookId
        },false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error','提交失败')
                }else{
                    is_pay.value = false
                    window.open(res.data.data.data)
                }
            }
        })
    }
    
</script>

<style lang='less' scoped>
.q-font{
 font-size: 16px; 
 color: #8d8d8d;  
 text-align: left;
 margin-bottom: 18px;
}
.contview{
    padding-top: 40px;
    .title1{
        width: 156px;
        height: 41px;
        background: url('@/assets/img/title-tip3.png');
        background-size:100% ;
        display: flex;
        justify-content: center;
        align-items: center;
        
        span{
            font-size: 16px;
            color: #fff;
        }
    }
    .count{
        font-size: 18px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 36px;
        padding-top:30px;
        text-align: left;
    }
}
.mconut{
    overflow: hidden;
}
.btn1{
    width: 280px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #D10B00;
    font-size: 16px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #D10B00;
    line-height: 40px;
    margin: 42px auto;
}
.b1view{
    margin-bottom: 10px;
    .title{
        font-weight: bold;
        font-size:18px ;
        margin-top: 48px;
        text-align: left;
    }
    .p{
        display: flex;
        margin-top: 16px;
        .p1{
            font-size:16px ;
            color: #D10B00;
        }
        .p2{
            color: #D10B00;
            font-size:20px ;
            font-weight: bold;
        }
    }
}
.payType{
    display: flex;
    .item{
        width: 148px;
        height: 56px;
        border:1px solid #e8e8e8;
        display: flex;
        align-items: center;
        margin-right: 15px;
        border-radius: 6px;
        padding: 0 5px;
        img{
            width: 28px;
            height: 20px;
        }
        span{
            color: #8d8d8d;
            font-size: 18px;
            margin-left: 12px;
        }
    }
    .active{
        border:1px solid #fcbdbd;
    }
}
</style>


  